<template>
	<div class="home">
		<!-- 首页轮播 -->
		<home-swipe :carouselItems="carouselItems"></home-swipe>

		<!-- 首页功能快捷入口 Grid宫格-->
		<home-enter></home-enter>

		<!-- 商品推荐 -->
		<home-product :productItems="recommendedItems" title="商品推荐"></home-product>
		
		<!-- 新品上架 -->
		<home-product :productItems="newArrialItems" title="新品上架"></home-product>
		
		<!-- 销售排行 -->
		<home-product :productItems="topSaleItems" title="销售排行"></home-product>
		
	</div>
</template>

<script>
	//导入封装后的首页接口
	import * as HomeAPI from "@/api/home.js"
	
	import HomeSwipe from "./components/HomeSwipe.vue"
	import HomeEnter from "./components/HomeEnter.vue"	
	import HomeProduct from "./components/HomeProduct.vue"
	
	export default {
		name: 'home',
		components: {
			HomeSwipe,HomeEnter,HomeProduct
		},

		data() {
			return {
				carouselItems: [], //轮播图
				recommendedItems: [], //商品推荐		
				newArrialItems: [], //新品上架		
				topSaleItems: [], //销售排行		
			}
		},

		// 生命周期钩子-实例创建后,可以用this.*
		created() {
			//2.使用封装后的接口
			HomeAPI.getHomeDataAPI().then(result => {
				console.log(result); //控制台调式输出
				this.carouselItems = result.data.carouselItems; //保存API调用的返回的轮播数据			
				this.recommendedItems = result.data.recommendedItems; //保存首页商品推荐数据
				this.newArrialItems = result.data.newArrialItems; //保存首页新品上架	数据
				this.topSaleItems = result.data.topSaleItems; //保存首页销售排行数据				
			});
		},		
	}
</script>
<style scoped>	
</style>
